<template>
    <div class="vessel" id="gameList">
        <div class="list">
            <div class="listTitle clearFix">
                <div class="left">
                    <div class="cut">榜单</div>
                    <div class="btn iconfont"> &#xe603;</div>

                </div>

                <div class="more">更多</div>
            </div>

            <div class="listsol clearFix">
                <div class="first" id="first">
                    <h4 class="headline">
                        安卓游戏
                    </h4>
                    <ul class="list">
                        <li class="portion">
                            <div class="rankNumber">
                                <span>
                                    1
                                </span>
                            </div>
                            <div class="gameData">
                                全明星大乱斗
                            </div>
                        </li>
                        <li class="portion">
                            天天点西游
                        </li>
                        <li class="portion">
                            天天点西游
                        </li>
                    </ul>
                </div>
                <div class="second">
                    <h4 class="headline">
                        IOS游戏
                    </h4>
                    <ul class="list">
                        <li class="portion">

                        </li>
                    </ul>
                </div>
                <div class="third">
                    <h4 class="headline">
                        H5游戏
                    </h4>
                    <ul class="list">
                        <li class="portion">

                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</template>
<script>
export default {
  components: {},
  title() {},
  data() {
    return {}
  },
  methods: {},

  asyncData({ store, route }) {},
  computed: {}
}
</script>

<style lang="less" scope>
#gameList {
  margin: 25px;
  border: 1px solid #c3c3c3;
  padding: 25px;
  .listTitle div {
    display: inline-block;
    line-height: 40px;
    font-size: 15px;
    font-weight: bold;
    color: #f9b55f;
    .cut {
      color: #999;
    }
    .btn {
      width: 20px;
      height: 20px;
      border-radius: 15px;
      position: absolute;
      left: 40px;
      top: 10px;
      line-height: 23px !important;
      font-size: 18px !important;
    }
  }
  .left {
    float: left;
    height: 40px;
    position: relative;
  }

  .more {
    float: right;
  }
}
.list {
  width: 60%;
  .portion .rankNumber {
    width: 20%;
    text-align: center;
    
    span{
       display: inline-block;
       width: 22px;
       height: 22px; 
       background-color: #88d42f;
       line-height: 20px;
       border-radius: 2px;        
    }
    // background-color: #2cd0ff
  }
  .gameData {
    width: 60%;
  }
}
.listsol div {
  display: inline-block;
  width: 30%;
  text-align: center;
  font-size: 15px;
  //   height: 100px;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  .headline {
    background: #f9b55f;
    border-radius: 6px;
    height: 27px;
    line-height: 27px;
    font-size: 15px;
    font-weight: normal;
  }
  ul {
    padding-top: 5px;
  }
  li {
    height: 32px;
    display: block;
    border: 1px solid #c3c3c3;
    margin: 10px 0;
    line-height: 32px;
    border-radius: 10px;
    font-size: 14px;
  }
  #first {
    color: #ffa93a;
  }
  .list {
    width: 100%;
  }
}
</style>


